CSS - BFC

什么是 BFC

BFC 是块级格式化上下文

BFC 的特性

1. BFC 内部的 box 在垂直方向上一个接一个的放置
2. 内部的 box 垂直方向上的距离由 margin 决定，属于同一个 BFC 的两个相邻 box 的 margin 会发生重叠（margin 重叠需满足三个条件：1.属于同一个 BFC 2.相邻 3.块级元素）
3. BFC 容器计算高度时，内部的浮动元素也参与计算
4. BFC 的区域不会与 float 的元素区域重叠
5. BFC 是页面上的一个独立容器，容器里的子元素不会影响外面的元素

怎么触发 BFC

1. float 不为 none
2. position 为 absolute 或 fixed
3. display 为 inline-block、table-cell、table-caption、flex、inline-flex
4. overflow 不为 visible
5. 根元素

BFC 的应用场景

1、解决块级元素垂直方向的 margin 重叠问题

两个元素属于同一个 BFC，才可能发生 margin 重叠，包括相邻元素和父子元素，只要它们之间没有阻挡（比如边框、非空内容、padding 等），就会发生 margin 重叠

margin 重叠：

1. 两个块级元素 margin 值均为正数时，取其中较大值
2. 两个块级元素 margin 值均为负数时，取其中绝对值较大值
3. 两个块级元素 margin 值为一正一负时，取它们相加后的值

相邻元素 margin 重叠：

给其中一个元素再包裹一层容器，并触发该容器形成 BFC，这样两个块级元素就不属于同一个 BFC

父子元素 margin 重叠：

（子元素相对父元素的 margin 会添加到父元素上）

触发父元素形成 BFC，或者给父元素添加 border 或 padding

2.清除浮动

BFC 容器计算高度时，内部的浮动元素也参与计算，因此可以利用 BFC 来解决浮动产生的高度塌陷问题

最常用的办法是给父元素设置 overflow: hidden

3.解决元素浮动后发生重叠的问题

BFC 的区域不会与 float 的元素区域重叠